<template>
  <div class="config-container">
    <div class="header">
      <h2>配置中心</h2>
      <el-button type="primary" @click="handleAdd">添加配置</el-button>
    </div>

    <!-- 搜索区域 -->
    <div class="search-area">
      <el-form :inline="true" :model="searchForm" class="search-form" size="middle">
        <el-form-item label="Key">
          <el-input v-model="searchForm.key" placeholder="请输入Key" clearable></el-input>
        </el-form-item>
        <el-form-item label="场景">
          <el-input v-model="searchForm.description" placeholder="请输入场景" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属应用">
          <el-select v-model="searchForm.app" placeholder="请选择应用" style="width: 140px;" clearable>
            <el-option
              v-for="item in getAllApplicationOptions()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      size="middle"
    >
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="key" label="Key" width="137"></el-table-column>
      <el-table-column prop="configValue" label="Value" show-overflow-tooltip>
        <template #default="scope">
          <div class="value-cell">
            <el-tooltip :content="scope.row.configValue" placement="top" :hide-after="0">
              <span>{{ truncateText(scope.row.configValue, 50) }}</span>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="场景" width="277">
        <template #default="scope">
          {{ scope.row.description || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="app" label="所属应用" width="120" >
        <template #default="scope">
          {{ getApplicationName(scope.row.app) }}
        </template>
      </el-table-column>
      <el-table-column prop="version" label="版本" width="100">
        <template #default="scope">
          {{ scope.row.version || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="updatedAt" label="更新时间" width="150">
        <template #default="scope">
          {{ formatDate(scope.row.updatedAt) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
      <template #default="scope">
        <el-switch
          v-model="scope.row.status"
          @change="(val) => handleStatusChange(val, scope.row)"
          :active-value="'online'"
          :inactive-value="'offline'"
        />
      </template>
    </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑配置' : '添加配置'"
      width="650px"
      @close="resetForm"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
        label-position="right"
        size="middle"
      >
        <!-- ID和Key同行显示 -->
        <div class="form-row">
          <!-- 编辑模式下显示ID字段 -->
          <el-form-item v-if="isEdit" label="ID" prop="id" class="form-item-half">
            <el-input v-model="form.id" disabled></el-input>
          </el-form-item>
          <!-- Key字段，编辑模式下禁用 -->
          <el-form-item label="Key" prop="key" :class="isEdit ? 'form-item-half' : 'form-item-full'">
            <el-input 
              v-model="form.key" 
              placeholder="请输入配置Key"
              :disabled="isEdit"
            ></el-input>
          </el-form-item>
        </div>

        <!-- Value字段独占一行 -->
        <el-form-item label="Value" prop="configValue">
          <div class="value-editor">
            <!-- JSON编辑器工具栏 -->
            <div class="editor-toolbar">
              <el-button-group size="middle">
                <el-button @click="formatJson" :disabled="!isValidJson(form.configValue)">
                  格式化JSON
                </el-button>
                <el-button @click="compressJson" :disabled="!isValidJson(form.configValue)">
                  压缩JSON
                </el-button>
              </el-button-group>
              
              <div class="editor-mode-switch">
                <span class="switch-label">普通模式</span>
                <el-switch
                  v-model="useJsonEditor"
                  size="middle"
                  @change="toggleEditorMode"
                  :active-text="''"
                  :inactive-text="''"
                />
                <span class="switch-label">JSON模式</span>
              </div>
              
              <span v-if="jsonValidationError" class="json-error">
                {{ jsonValidationError }}
              </span>
            </div>
            <!-- JSON编辑器 -->
            <div v-if="useJsonEditor" class="json-editor">
              <codemirror
                v-model="form.configValue"
                :style="{ height: '200px' }"
                :extensions="jsonExtensions"
                :disabled="false"
                @change="validateJsonValue"
              />
            </div>
            
            <!-- 普通文本编辑器 -->
            <el-input
              v-else
              v-model="form.configValue"
              type="textarea"
              :rows="8"
              placeholder="请输入配置Value"
              @input="validateJsonValue"
            ></el-input>
          </div>
        </el-form-item>

        <!-- 场景和所属应用同行显示 -->
        <div class="form-row">
          <el-form-item label="场景" prop="description" class="form-item-half">
            <el-input v-model="form.description" placeholder="请输入适用场景"></el-input>
          </el-form-item>
          
          <el-form-item v-if="!isEdit" label="版本" prop="version">
            <el-input v-model="form.version" placeholder="请输入版本号"></el-input>
          </el-form-item>
        </div>
        
        <!-- 编辑模式下显示版本信息对比 -->
        <el-form-item v-if="isEdit" label="版本信息" prop="version" :rules="rules.version">
          <div class="version-row">
            <div class="version-item">
              <span class="version-label">当前版本：</span>
              <el-tag type="info" size="large">{{ originalVersion }}</el-tag>
            </div>
            <div class="version-item">
              <span class="version-label">新版本：</span>
              <el-input 
                v-model="form.version" 
                placeholder="请输入新版本号"
                style="width: 200px;"
                @blur="validateVersion"
              ></el-input>
            </div>
          </div>
        </el-form-item>
        
        <!-- 新增模式下的版本字段 -->
        <el-form-item label="所属应用" prop="app" class="form-item-half">
            <div class="app-config-row">
              <!-- 应用选择下拉框 -->
              <el-select 
                v-model="form.app" 
                placeholder="请选择所属应用" 
                style="width: 127px"
                :disabled="isEdit || (!isEdit && isSystemConfig)"
                @change="handleApplicationChange"
              >
                <el-option
                  v-for="item in getAllApplicationOptions()"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
                    <!-- 新增模式下显示系统配置选项 -->
        <el-form-item v-if="!isEdit" label="" class="system-config-form-item">
          <div class="system-config-section">
            <el-checkbox 
              v-model="isSystemConfig" 
              @change="handleSystemConfigChange"
            >
              设置为系统配置
            </el-checkbox>
            <el-tooltip
              content="系统配置用于配置中心本身的配置项，不归属于任何业务应用"
              placement="top"
              effect="dark"
            >
              <el-icon class="help-icon">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
          </div>
        </el-form-item>
          </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 删除确认框 -->
    <el-dialog
      v-model="deleteDialogVisible"
      title="删除确认"
      width="400px"
    >
      <div class="delete-confirm">
        <el-icon class="warning-icon"><WarningFilled /></el-icon>
        <p>确定要删除该配置吗？此操作不可恢复。</p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="confirmDelete">确认删除</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { WarningFilled, QuestionFilled } from '@element-plus/icons-vue';
import { Codemirror } from 'vue-codemirror';
import { json } from '@codemirror/lang-json';
import { basicSetup } from 'codemirror';
import { oneDark } from '@codemirror/theme-one-dark';
import request from '@/utils/request';

// API服务封装
const apiService = {
  // 获取系统应用配置
  async getSystemApplications() {
    try {
      const response = await request.get('/public/getConfig', {
        params: {
          app: 'system',
          configKey: 'SysApplication'
        }
      });
      return response.data;
    } catch (error) {
      console.error('获取系统应用配置失败', error);
      ElMessage.error('获取系统应用配置失败');
      throw error;
    }
  },
  
  // 获取配置列表
  async getConfigs(params) {
    try {
      const response = await request.get('/operate/query', { 
        params: {
          configKey: params.key,
          description: params.description,
          app: params.app,
          page: params.pageNum,
          pageSize: params.pageSize
        } 
      });
      return response.data;
    } catch (error) {
      console.error('获取配置列表失败', error);
      ElMessage.error('获取配置列表失败');
      throw error;
    }
  },
  
  // 添加配置
  async addConfig(config) {
    try {
      const requestData = {
        configKey: config.key,
        configValue: config.configValue,
        description: config.description,
        app: config.appCode, // 传递appCode作为app字段
        appName: config.appName, // 新增appName字段
        version: config.version,
        status: config.status
      };
      
      const response = await request.post('/operate/insert', requestData);
      return response.data;
    } catch (error) {
      console.error('添加配置失败', error);
      ElMessage.error('添加配置失败');
      throw error;
    }
  },
  
  // 更新配置
  async updateConfig(config) {
    try {
      const requestData = {
        id: config.id,
        configKey: config.key,
        configValue: config.configValue,
        description: config.description,
        app: config.app,
        version: config.version,
      };
      
      const response = await request.post('/operate/update', requestData);
      return response.data;
    } catch (error) {
      console.error('更新配置失败', error);
      ElMessage.error('更新配置失败');
      throw error;
    }
  },
  
  // 删除配置
  async deleteConfig(id) {
    try {
      const response = await request.get(`/operate/delete?businessId=${id}`);
      return response.data;
    } catch (error) {
      console.error('删除配置失败', error);
      ElMessage.error('删除配置失败');
      throw error;
    }
  },
    // 上、下线配置
  async switchConfig(app, configKey, status) {
    try {
      const response = await request.post('/operate/switch', null, {
        params: {
          app,
          configKey,
          status
        }
      });
      return response.data;
    } catch (error) {
      console.error('切换配置状态失败', error);
      ElMessage.error('切换配置状态失败');
      throw error;
    }
  }
};

// 响应式数据定义
const tableData = ref([]);
const loading = ref(false);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);

// 系统配置标识
const SYSTEM_CONFIG_VALUE = 'system';

// 应用选项配置 - 改为从服务端获取
const applicationOptions = ref([]);
const applicationsLoading = ref(false);

// 系统配置选项
const systemConfigOption = { value: SYSTEM_CONFIG_VALUE, label: '系统应用' };

// 搜索表单数据
const searchForm = reactive({
  key: '',
  description: '',
  app: ''
});

// 表单相关状态
const formRef = ref(null);
const dialogVisible = ref(false);
const isEdit = ref(false);
const isSystemConfig = ref(false); // 新增：系统配置标识
const form = reactive({
  id: '',
  key: '',
  configValue: '',
  description: '',
  app: '',
  appCode: '', // 新增appCode字段
  appName: '', // 新增appName字段
  version: '',
  status: 'offline'
});

// 版本控制状态
const originalVersion = ref('');

// JSON编辑器相关状态
const useJsonEditor = ref(true);
const jsonValidationError = ref('');
const jsonExtensions = [basicSetup, json(), oneDark];

// 删除确认对话框状态
const deleteDialogVisible = ref(false);
const currentRow = ref(null);

// 表单验证规则
const rules = reactive({
  key: [
    { required: true, message: '请输入配置Key', trigger: 'blur' },
    { min: 1, max: 100, message: 'Key长度在1到100个字符之间', trigger: 'blur' }
  ],
  configValue: [
    { required: true, message: '请输入配置Value', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        // 如果开启JSON模式且内容不为空，验证JSON格式
        if (useJsonEditor.value && value && value.trim()) {
          if (!isValidJson(value)) {
            callback(new Error('请输入有效的JSON格式'));
            return;
          }
        }
        callback();
      },
      trigger: ['blur', 'change']
    }
  ],
  description: [
    { required: true, message: '请输入应用场景', trigger: 'blur' }
  ],
  app: [
    { required: true, message: '请选择所属应用', trigger: 'change' }
  ],
  version: [
    { required: true, message: '请输入版本号', trigger: 'blur' },
    { 
      validator: (rule, value, callback) => {
        if (!value || value.trim() === '') {
          callback(new Error('版本号不能为空'));
          return;
        }
        
        if (!/^[0-9.]+$/.test(value)) {
          callback(new Error('版本号格式不正确，只能包含数字和点号'));
          return;
        }
        
        if (isEdit.value && value === originalVersion.value) {
          callback(new Error('新版本号不能与当前版本号相同'));
          return;
        }
        
        callback();
      }, 
      trigger: ['blur', 'change']
    }
  ]
});

// 组件挂载后初始化数据
onMounted(() => {
  Promise.all([
    loadSystemApplications(),
    fetchData()
  ]);
});

// 加载系统应用配置
const loadSystemApplications = async () => {
  applicationsLoading.value = true;
  try {
    const result = await apiService.getSystemApplications();
    if (result.code === 200 && result.data) {
      const configValue = result.data.configValue;
      if (configValue) {
        // 解析JSON配置
        const apps = JSON.parse(configValue);
        applicationOptions.value = apps.map(app => ({
          value: app.appCode,
          label: app.appName
        }));
      } else {
        applicationOptions.value = [];
      }
    } else {
      applicationOptions.value = [];
      ElMessage.error('未能获取系统应用配置，请联系管理员');
    }
  } catch (error) {
    applicationOptions.value = [];
    ElMessage.error('加载系统应用配置出错');
  } finally {
    applicationsLoading.value = false;
  }
};

// 获取所有应用选项（包括系统应用，用于搜索下拉框）
const getAllApplicationOptions = () => {
  return [systemConfigOption, ...applicationOptions.value];
};


const getApplicationOptions = () => {
  if (!isEdit.value && isSystemConfig.value) {
    return [systemConfigOption];
  }
  return applicationOptions.value;
};
// 处理系统配置复选框变化
const handleSystemConfigChange = (checked) => {
  if (checked) {
    // 勾选系统配置时，自动设置为系统应用
    form.app = SYSTEM_CONFIG_VALUE;
    form.appCode = SYSTEM_CONFIG_VALUE;
    form.appName = '系统应用';
  } else {
    // 取消勾选时，清空应用选择
    form.app = '';
    form.appCode = '';
    form.appName = '';
  }
};

// 监听应用选择变化，更新appCode和appName
const handleApplicationChange = (value) => {
  const selectedApp = applicationOptions.value.find(app => app.value === value);
  if (selectedApp) {
    form.appCode = selectedApp.value;
    form.appName = selectedApp.label;
  } else if (value === SYSTEM_CONFIG_VALUE) {
    form.appCode = SYSTEM_CONFIG_VALUE;
    form.appName = '系统应用';
  } else {
    form.appCode = '';
    form.appName = '';
  }
};

// 数据获取方法
const fetchData = async () => {
  loading.value = true;
  
  try {
    const params = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      ...searchForm
    };
    
    const result = await apiService.getConfigs(params);
    
    if (result.code === 200) {
      const responseData = result.data.data || [];
      
      // 数据字段映射转换
      tableData.value = responseData.map(item => ({
        id: item.id,
        key: item.configKey,
        configValue: item.configValue,
        description: item.description || '',
        app: item.app,
        version: item.version || '1.0.0',
        status: item.status,
        updatedAt: item.updatedAt
      }));
      
      total.value = result.data.total || 0;
    } else {
      ElMessage.warning(result.message || '获取数据失败');
    }
  } catch (error) {
    console.error('获取数据出错', error);
    ElMessage.error('网络错误，请稍后重试');
  } finally {
    loading.value = false;
  }
};

// 配置操作方法
const handleAdd = () => {
  isEdit.value = false;
  dialogVisible.value = true;
  resetForm();
};

const handleEdit = (row) => {
  isEdit.value = true;
  dialogVisible.value = true;
  
  // 保存原始版本号用于验证
  originalVersion.value = row.version || '1.0.0';
  
  // 填充表单数据
  Object.keys(form).forEach(key => {
    if (key in row) {
      form[key] = row[key];
    }
  });
  
  // 编辑模式下清空版本号，强制用户输入新版本
  if (isEdit.value) {
    form.version = '';
  }
};

const handleDelete = (row) => {
  currentRow.value = row;
  deleteDialogVisible.value = true;
};



const confirmDelete = async () => {
  try {
    const result = await apiService.deleteConfig(currentRow.value.id);
    
    if (result.code === 200) {
      ElMessage.success('删除成功');
      fetchData();
    } else {
      ElMessage.warning(result.message || '删除失败');
    }
  } catch (error) {
    console.error('删除出错', error);
  } finally {
    deleteDialogVisible.value = false;
  }
};

// 表单验证方法
const validateVersion = () => {
  if (formRef.value) {
    formRef.value.validateField('version');
  }
};

const submitForm = async () => {
  if (!formRef.value) return;
  
  // 新增模式下，确保设置了appCode和appName
  if (!isEdit.value) {
    handleApplicationChange(form.app);
  }
  
  // 编辑模式下额外版本验证
  if (isEdit.value) {
    if (!form.version) {
      ElMessage.error('请输入新版本号');
      return;
    }
    if (form.version === originalVersion.value) {
      ElMessage.error('新版本号不能与当前版本号相同');
      return;
    }
  }
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const result = isEdit.value 
          ? await apiService.updateConfig(form)
          : await apiService.addConfig(form);
        
        if (result.code === 200) {
          ElMessage.success(isEdit.value ? '配置已更新' : '配置已添加');
          dialogVisible.value = false;
          fetchData();
          loadSystemApplications();
        } else {
          ElMessage.warning(result.message || (isEdit.value ? '更新失败' : '添加失败'));
        }
      } catch (error) {
        console.error(isEdit.value ? '更新出错' : '添加出错', error);
      }
    }
  });
};

const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  
  // 重置表单数据
  Object.keys(form).forEach(key => {
    form[key] = key === 'status' ? 'offline' : '';
  });
  
  // 重置系统配置标识
  isSystemConfig.value = false;
  originalVersion.value = '';
};

// 搜索和分页方法
const handleSearch = () => {
  currentPage.value = 1;
  fetchData();
};

const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = '';
  });
  currentPage.value = 1;
  fetchData();
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchData();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchData();
};


// JS - 状态切换处理方法
const handleStatusChange = async (val, row) => {
  try {
    const result = await apiService.switchConfig(row.app, row.key, val);
    
    if (result.code === 200) {
      const statusText = val === 'online' ? '上线' : '下线';
      ElMessage.success(`配置已${statusText}`);
    } else {
      // 失败时还原状态
      row.status = row.status === 'online' ? 'offline' : 'online';
      ElMessage.warning(result.message || '状态更新失败');
    }
  } catch (error) {
    // 异常时还原状态
    row.status = row.status === 'online' ? 'offline' : 'online';
    console.error('更新状态出错', error);
  }
};

// 工具方法
const getApplicationName = (value) => {
  // 优先从系统配置选项中查找
  if (value === systemConfigOption.value) {
    return systemConfigOption.label;
  }
  
  // 从业务应用选项中查找
  const app = applicationOptions.value.find(item => item.value === value);
  return app ? app.label : value;
};

const truncateText = (text, maxLength) => {
  if (!text) return '';
  return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
};

const formatDate = (dateString) => {
  if (!dateString) return '-';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// JSON编辑器相关方法
const isValidJson = (str) => {
  if (!str || str.trim() === '') return false;
  try {
    JSON.parse(str);
    return true;
  } catch (e) {
    return false;
  }
};

const validateJsonValue = () => {
  if (useJsonEditor.value && form.configValue && form.configValue.trim()) {
    if (!isValidJson(form.configValue)) {
      jsonValidationError.value = 'JSON格式不正确';
    } else {
      jsonValidationError.value = '';
    }
  } else {
    jsonValidationError.value = '';
  }
  
  // 触发表单验证
  if (formRef.value) {
    formRef.value.validateField('configValue');
  }
};

const formatJson = () => {
  if (isValidJson(form.configValue)) {
    try {
      const parsed = JSON.parse(form.configValue);
      form.configValue = JSON.stringify(parsed, null, 2);
      jsonValidationError.value = '';
      ElMessage.success('JSON格式化成功');
    } catch (e) {
      ElMessage.error('JSON格式化失败');
    }
  }
};

const compressJson = () => {
  if (isValidJson(form.configValue)) {
    try {
      const parsed = JSON.parse(form.configValue);
      form.configValue = JSON.stringify(parsed);
      jsonValidationError.value = '';
      ElMessage.success('JSON压缩成功');
    } catch (e) {
      ElMessage.error('JSON压缩失败');
    }
  }
};

const toggleEditorMode = () => {
  jsonValidationError.value = '';
  const modeText = useJsonEditor.value ? 'JSON' : '普通';
  ElMessage.info(`已切换到${modeText}编辑模式`);
};
</script>

<style scoped>
.config-container {
  padding: 12px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.search-area {
  margin-bottom: 3px;
  padding: 12px;
  padding-bottom: 3px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
}

.pagination-container {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.value-cell {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delete-confirm {
  display: flex;
  align-items: center;
  gap: 16px;
}

.warning-icon {
  font-size: 24px;
  color: #e6a23c;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.version-row {
  display: flex;
  align-items: center;
  gap: 30px;
}

.version-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.version-label {
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
}

/* 表单行样式 - 新增 */
.form-row {
  display: flex;
  gap: 16px;
  width: 100%;
}

.form-item-half {
  flex: 1;
}

.form-item-full {
  width: 100%;
}

/* 系统配置表单项样式 */
.system-config-form-item {
  margin-top: 8px;
}

.system-config-form-item :deep(.el-form-item__label) {
  width: 0 !important;
  margin-right: 0 !important;
}

.system-config-form-item :deep(.el-form-item__content) {
  margin-left: 100px !important;
}

/* 系统配置行样式 */
.app-config-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.system-config-section {
  display: flex;
  align-items: center;
  gap: 4px;
}

.help-icon {
  font-size: 14px;
  color: #909399;
  cursor: help;
}

.help-icon:hover {
  color: #409eff;
}

/* JSON编辑器样式 */
.value-editor {
  width: 100%;
}

.editor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px 0;
}

.editor-mode-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.switch-label {
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
}

.json-error {
  color: #f56c6c;
  font-size: 12px;
  margin-left: 12px;
}

.json-editor {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.json-editor :deep(.cm-editor) {
  font-size: 13px;
}

.json-editor :deep(.cm-focused) {
  outline: none;
  border-color: #409eff;
}
</style>